<template>
	<view>
		<view class="header-view-box">
			<customNav bgColor="#3957BF" :backIcon="true" backIconColor="white"></customNav>
			<view class="contentViewBox ">

				<cssArcBackground bgColor="#3957BF" height="60" />
				<view class="swiperImageViewClass" id="input_id">
					<view class="inputboxClass">
						<image class="searchjingClass" src="@/static/search.png"></image>
						<input class="inputClass" @input="inputPhone" placeholder="品牌 车型"
							placeholder-class="pcs" />
						<text class="inputTextClass" @tap="searchBtn()">搜索</text>
					</view>
					<view id="id_dingwei"></view>
				</view>
			</view>
		</view>
		<!-- {
			"id": "C3F3AB91-534F-57DE-9202-CD5FA62328E0",
			"car_age": "1年以下",
			"mileage": "不限",
			"describe": null,
			"create_time": "2023-05-30",
			"budget_money": "10",
			"model_name": "寻美版奥迪 Q7  23款 3.0T Premium Plus高级加强 10",
			"appearance": "浅绿色/海洋蓝",
			"area": "卖北京",
			"car_status": 1,
			"car_status_name": "供应商报价中",
			"quotation_number": 0
		}-->
		<view class="me-search-car-list-box-class" :style="'top:' + top_height+';'" v-if="isShowList">
			<view v-if="ISNoData" class="NO-DATA-view-box-class">
				<image class="NO-DATA-image-view-class" src="@/static/NoDataBac.png"></image>
				<view class="NO-DATA-text-chushou-class">暂无数据</view>
			</view>
			<scroll-view v-else scroll-y="true" class="scroll-view-class" :style="'height:' + scroll_height+';width:694rpx;'"
				:scroll-top="scrollTop" refresher-enabled :refresher-triggered="triggered" @refresherrefresh="onRefresh"
				@scrolltolower="lower">

				<view class="item-view-box-for">
					<view v-for="(item,index) in meSearchCarListData" :key="index">
						<view class="view-item-box-class" @click="searchCarItemClick(item)">
							<text class="me-search-car-item-title">{{item.model_name}}</text>
							<view class="beizhu-biaoqian-view-box-class">
								<view class="appearance-view-text-class">{{item.appearance}}</view>
								<view class="appearance-view-text-class">{{item.area}}</view>
							</view>
							<view class="price-time-row-view-class">
								<view class="budget_money-view-text-class-yusuan">预算：{{item.budget_money}}万</view>
								<view class="budget_money-view-text-class" v-if="item.budget_money">
									指导价格：{{item.budget_money}}万</view>
								<view class="create_time-view-text-class">{{item.create_time}}</view>
							</view>
							<view
								:class="item.car_status_name=='已失效'?'car_status_name-view-class-shixiao':'car_status_name-view-class'">
								{{item.car_status_name}}
							</view>
						</view>
					</view>
					<view v-if="isShowMore" class="no-more-text-bottom-class">没有更多了</view>
					<view v-else class="no-more-text-bottom-class"></view>
				</view>

			</scroll-view>
			
		</view>

	</view>
</template>

<script>
	import cssArcBackground from '@/components/cssArcBackground/cssArcBackground.vue';
	import customNav from '@/components/custom-nav/custom-nav.vue';
	import {
		getUsedCarSearchMyReleaseList
	} from "@/api/search-car.js"
	export default {
		components: {
			cssArcBackground,
			customNav
		},
		data() {
			return {
				meSearchCarListData: [],
				top_height: 100,
				scroll_height: 600,
				scroll_width: 694,
				isRefresher: false, //下拉刷新状态
				page: 1, //第几页数据
				page_num: 8,
				last_page: 0, //总页数
				isShowMore: false,//上拉加载没有数据时展示控制
				ISNoData:false,//无数据时图片展示控制
				scrollTop: 0,

				isEnd: false,
				triggered: false,
				isfreshing: false,
				isShowList: true,

				users_id: ''
			}
		},
		onShow() {
			this.pageGetUsedCarSearchMyReleaseList()
			this.$utils.stopPage() //禁止页面本身的滑动
		},
		/**
		 * onHide()触发的场景：
		 *导航页1>>导航页2，会触发导航页1  onHide（）
		 *
		 *导航页>>子页面，会触发导航页  onHide（）
		 *
		 *子页面1>>子页面2，会触发子页面1  onHide（）
		 **/
		onHide() {
			this.$utils.movePage()
		},
		/**
		 *onUnload()触发的场景：
		 *从子页面2返回到子页面1，会触发子页面2的onUnload()
		 *
		 *从子页面返回到导航页，会触发子页面的onUnload()
		 */
		onUnload() {
			this.$utils.movePage()


		},
		onLoad() {
			const value = uni.getStorageSync('login')
			if (value) {
				this.users_id = value.id
			}
			this.pageGetUsedCarSearchMyReleaseList()
		},
		onReady() {
			const query = uni.createSelectorQuery().in(this);
			query.select('#id_dingwei').boundingClientRect(data => {
				this.$utils.log("得到布局位置信息" + JSON.stringify(data));
				var that = this
				that.isShowList = false
				that.$nextTick(() => {
					that.scroll_height = uni.getSystemInfoSync().windowHeight - data.top - 20 + 'px';
					that.top_height = data.top + 20 + 'px'
					that.isShowList = true
					this.$utils.log("topgaodu   " + that.top_height);
					this.$utils.log("that.scroll_height  " + that.scroll_height);
				})

			}).exec();
		},

		methods: {
			searchCarItemClick(item) {
				this.$utils.log("点击了item项  " + JSON.stringify(item))
				uni.navigateTo({
					url: '/pages/home/secondhandCar/meSearchCar/mySearchCardDetail?id=' + item.id
					// url: '/pages/home/secondhandCar/serachCarDetails/serachCarDetails?id=' + item.id
				})
			},
			inputPhone() {},
			//请求数据的方法
			pageGetUsedCarSearchMyReleaseList() {
				var that = this
				this.isRefresher = true
				getUsedCarSearchMyReleaseList(this.users_id, this.page_num, this.page).then(res => {
					that.$utils.log("打印返回我发布的寻车列表数据  " + JSON.stringify(res))
					that.$nextTick(() => {
						if (that.page == 1) {
							that.meSearchCarListData = []
							that.meSearchCarListData = res.data.data
							that.triggered = false
							that.isfreshing = false
						} else {
							for (var i = 0; i < res.data.data.length; i++) {
								that.meSearchCarListData.push(res.data.data[i]); // 加载的数据追加在上一页后面
							}
							that.isEnd = false
						}
						that.last_page = res.data.last_page
						if(that.meSearchCarListData.length<=0){
							that.ISNoData = true
						}else{
							that.ISNoData = false
						}
						that.$forceUpdate()
						if (that.last_page == that.page) {
							that.isShowMore = true
						} else {
							that.isShowMore = false
						}
					})

				})
			},

			onRefresh() {
				if (!this.triggered) {
					if (this.isfreshing) return;
					this.isfreshing = true;
					if (!this.triggered) {
						this.triggered = true;
					}
					this.page = 1
					this.$utils.log("触发下拉刷新  第1个  111111 refresherrefreshFun")
					this.pageGetUsedCarSearchMyReleaseList()
				}
			},

			lower() {
				if (!this.isShowMore) {
					if (!this.isEnd) {
						this.isEnd = true
						if (this.page < this.last_page) {
							this.page = this.page + 1
							this.pageGetUsedCarSearchMyReleaseList()
						} else {
							this.$utils.log("没有数据了")
							uni.showToast({
								title:'没有数据了',
								icon:'none'
							})
						}
					}
				}
				if(this.isShowMore){
					var that = this
					setTimeout(()=>{
						that.isShowMore = false
					},2000)
				}
			}
		}
	}
</script>

<style>
	page {
		background: #F5F5F5;
		opacity: 1;
	}

	.contentViewBox {
		width: 100%;
		height: auto;
		/* 父元素设置相对定位 */
		position: relative;
	}

	.swiperImageViewClass {
		/* 设置绝对定位 */
		position: absolute;
		/* 距离父元素上边缘 50px */
		top: 0rpx;
		z-index: 1;
		text-align: center;
		width: 100%;
	}

	.inputboxClass {
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #fefefe;
		border-radius: 50rpx;
		margin: 0rpx 28rpx;
	}

	.searchjingClass {
		margin-left: 26rpx;
		width: 30rpx;
		height: 30rpx;
	}

	.inputClass {
		flex: 1;
		padding: 0rpx;
		height: 72rpx;
		text-align: left;
	}

	.inputTextClass {
		width: 112rpx;
		height: 64rpx;
		background: #0E59EA;
		opacity: 1;
		border-radius: 36rpx;
		margin: 4rpx 6rpx;
		display: flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-family: PingFangSC-Medium;
		line-height: 0rpx;
		color: #FFFFFF;
		opacity: 1;
	}

	.pcs {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		opacity: 1;
		margin-left: 12rpx;
	}

	.header-view-box {
		position: fixed;
		top: 10;
		width: 100%;
		z-index: 1;
	}

	.me-search-car-list-box-class {
		position: fixed;

		left: 28rpx;
		right: 28rpx;
		bottom: 0;
		z-index: 1;
	}

	.scroll-view-class {
		white-space: nowrap; // 滚动必须加的属性
		overflow-wrap: break-word; //scrool 中不换行解决方法
		white-space: normal;
	}

	.me-search-car-item-title {
		font-size: 32rpx;
		font-family: Alimama ShuHeiTi;
		font-weight: bold;
		color: #000026;
		opacity: 1;
		width: 388rpx;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2; //显示的行数

	}

	.item-view-box-for {
		margin-bottom: 50rpx;
	}

	.view-item-box-class {
		padding: 38rpx 24rpx 44rpx 28rpx;
		margin-bottom: 12rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 14rpx;
		/* 父元素设置相对定位 */
		position: relative;
	}

	.beizhu-biaoqian-view-box-class {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx 0rpx;
	}

	.appearance-view-text-class {
		background-color: #EDF1FF;
		opacity: 1;
		border-radius: 8rpx;
		padding: 8rpx 30rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #0E59EA;
		opacity: 1;
		margin-right: 10rpx;
	}

	.price-time-row-view-class {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.budget_money-view-text-class-yusuan {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ED2F2F;
		opacity: 1;
		margin-right: 28rpx;
	}

	.budget_money-view-text-class {
		flex: 1;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		opacity: 1;
	}

	.create_time-view-text-class {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		opacity: 1;
	}

	.car_status_name-view-class {
		width: auto;
		background: linear-gradient(261deg, #0E59EA 0%, rgba(14, 89, 234, 0.3) 100%);
		border-radius: 0rpx 14rpx 0rpx 14rpx;
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #333333;
		opacity: 1;
		padding: 8rpx 28rpx;
		/* 设置绝对定位 */
		position: absolute;
		/* 距离父元素上边缘 50px */
		top: 0rpx;
		right: 0rpx;
		z-index: 1;
		text-align: center;
		width: auto;
	}

	.right-top-view-box {
		/* 设置绝对定位 */
		position: absolute;
		/* 距离父元素上边缘 50px */
		top: 0rpx;
		right: 0rpx;
		z-index: 1;
		text-align: center;
		width: 100%;
	}

	.car_status_name-view-class-shixiao {
		background: linear-gradient(263deg, #E5E5E5 0%, rgba(242, 242, 242, 0.22) 100%);
		border-radius: 0rpx 14rpx 0rpx 14rpx;
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #333333;
		opacity: 1;

		padding: 8rpx 62rpx;
		/* 距离父元素上边缘 50px */
		top: 0rpx;
		right: 0rpx;
		z-index: 1;
		text-align: center;
		width: auto;
	}

	.no-more-text-bottom-class {
		height: 180rpx;
		text-align: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		opacity: 1;
		margin-top: 46rpx;
	}
	.NO-DATA-view-box-class {
		width: 100%;
		height: 100%;
		text-align: center;
	}
	
	.NO-DATA-image-view-class {
		width: 380rpx;
		height: 380rpx;
		margin: auto;
		margin-top: 208rpx;
	}
	.NO-DATA-text-chushou-class{
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #1C2125;
		opacity: 1;
	}
</style>